<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <!--以最新的IE浏览器引擎去渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--如果是双核浏览器，则使用webkit内核渲染-->
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title></title>
    <meta name="description" content=""/>
    <meta name="keyword" content=""/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    <link rel="stylesheet" href="__PUBLIC__/frame/layui/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/frame/static/css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_816113_2yyzilu1xq.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery1.12.4.js"></script>
    <script type="text/javascript" src="__PUBLIC__/frame/layui/layui.js"></script>
    <link rel="icon" href="__PUBLIC__/frame/static/image/code.png">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=lRgLESHPGQVf0hz4bQ6bmube6SO741kV"></script>   <!--百度地图-->
</head>
<body>
<style>
    .layui-col-md2 {
        border-left: 1px solid red;
    }

    .layui-card {
        overflow: hidden;
    }

    .layui-card-header {
        background: #D7D7D7;
        text-align: center;
        margin-bottom: 10px;
    }

    .yuan {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #3A92E9;
        float: left;
        margin-left: 42px;
        text-align: center;
        cursor: pointer;
    }

    .wenzi {
        float: left;
        width: 100%;
    }

    .wenzi span {
        padding-top: 5px;
        margin-left: 40px;
        font-size: 12px;
        float: left;
    }

    .wenzi span:first-child {
        margin-left: 40px;
    }
    .yuan i {
        font-size: 40px;
        line-height: 50px;
        color: #ffffff;
    }

    .yuan span {
        color: #000;
        font-size: 16px;
    }

    .yuan i:first-child {
        font-weight: 900;
    }

    .more {
        height: 24px;
        float: right;
        font-size: 12px;
        color: #169BD5;
        margin-right: 20px;
    }

    .weikai {
        border-radius: 6px;
        margin-left: 28%;
    }
    .xia{
        width: 83%;
        position: fixed;
        z-index: 1;
        bottom: 0;
        height: 220px;
        background: #FFFFFF;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .xia .tit{
        width: 100%;
        background: #D7D7D7;
        margin-bottom: 0;
    }
    i.hao{
        font-style: normal;
        font-size: 12px;
        line-height:16px;
    }
    .fl{
        float: left;
    }
    .zhishi{
        display: inline-block;
        width: 26px;
        height: 18px;
        background: #D7D7D7;
        border-radius: 1px;
        position: relative;
        top: 0px;
        left: 5px;
        cursor: pointer;
        float: left;
    }
    /*.zhishi:hover{*/
        /*box-shadow: 1px 1px 3px #000;*/
    /*}*/
    .danger{
        width: 24px;
        height: 16px;
        border: 1px solid #EF553A;
        color: #EF553A;
        font-size: 12px;
        text-align: center;
        float: left;
    }
    .active{
        background: #FFC107;
    }
    .danyuan{
        width: 155px;
        margin-left: 13px;
        margin-top: 10px;
        float: left;
        height: 180px;
    }
    .danyuan ul{
        float: left;
        margin-left: 15px;
    }
    .danyuan ul li{
        float: left;
        padding: 3px 0;
        margin-left: 10px;
    }
    .layui-colla-title{
        height:24px;
        line-height:24px;
        background: #D7D7D7;
    }
    .warp-top{
        width: 100%;
        height: 20px;
        margin-top: 2px;
    }
    .mr20{
        margin-left: 18%;
    }
    .mr20 b{
        font-weight: 400;
        line-height: 12px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md10">
            <div style="padding-bottom: 60%; width: 100%;" id="con"></div>
            <div class="layui-card xia">
                <div class="layui-card-header tit">帅府小区1号楼房屋情况</div>
                <div class="warp-top">
                    <div class="mr20 fl"><span class="zhishi fl"></span><b>-------- 正常</b></div>
                    <div class="mr20 fl"><span class="zhishi danger fl">空</span><b>-------- 空屋</b></div>
                    <div class="mr20 fl"><span style="background: #33ABA0;" class="zhishi fl"></span><b>-------- 选中</b></div>
                </div>
                <div class="layui-card-body">
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi danger">空</span></li>
                            <li><i class="hao fl">501</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi danger">空</span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">102</i><span class="zhishi"></span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">一单元</p>
                    </div>
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">501</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi danger">空</span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">102</i><span class="zhishi"></span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">二单元</p>
                    </div>
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi active"></span></li>
                            <li><i class="hao fl">501</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>

                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi danger">空</span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">三单元</p>
                    </div>
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">501</i><span class="zhishi danger">空</span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>

                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">102</i><span class="zhishi"></span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">四单元</p>
                    </div>
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">501</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">102</i><span class="zhishi"></span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">五单元</p>
                    </div>
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">501</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>

                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi danger">空</span></li>
                            <li><i class="hao fl">102</i><span class="zhishi"></span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">六单元</p>
                    </div>
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">501</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi danger">空</span></li>
                            <li><i class="hao fl">201</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>

                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">102</i><span class="zhishi"></span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">七单元</p>
                    </div>
                    <div class="danyuan">
                        <ul>
                            <li><i class="hao fl">601</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">501</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">401</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">301</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">201</i><span class="zhishi danger">空</span></li>
                            <li><i class="hao fl">101</i><span class="zhishi"></span></li>

                            <li><i class="hao fl">602</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">502</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">402</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">302</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">202</i><span class="zhishi"></span></li>
                            <li><i class="hao fl">102</i><span class="zhishi"></span></li>
                        </ul>
                        <p style="float:left; text-align: center;width: 100%;">八单元</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div style="position: fixed; z-index: 2; background: #FFFFFF; margin-right: -20px;height: 100%; overflow: auto">
                <div class="layui-card">
                    <div class="layui-card-header">门禁控制</div>
                    <div class="layui-card-body">
                        <div class="yuan" id="menjin"><i class="iconfont">&#xe609;</i></div>
                        <div class="yuan"><i class="iconfont">&#xe615;</i></div>
                        <div class="wenzi"><span>开/关门禁</span><span>播放门禁视频</span></div>
                    </div>
                </div>
                <div class="layui-card" style="margin-top: 20px">
                    <div class="layui-card-header">门禁信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <tr id="jilu">
                                <td>出门</td>
                                <td>8/12 9:08</td>
                            </tr>
                            <tr>
                                <td>出门</td>
                                <td>8/12 9:08</td>
                            </tr>
                            <tr>
                                <td>出门</td>
                                <td>8/12 9:08</td>
                            </tr>
                            <tr>
                                <td>出门</td>
                                <td>8/12 9:08</td>
                            </tr>
                            <tr>
                                <td>出门</td>
                                <td>8/12 9:08</td>
                            </tr>
                            <tr>
                                <td>出门</td>
                                <td>8/12 9:08</td>
                            </tr>
                        </table>
                        <a class="more" href="#">查看更多</a>
                    </div>
                </div>
                <div class="layui-card" style="margin-top: 20px">
                    <div class="layui-card-header">报警信息</div>
                    <div class="layui-card-body">
                        <button class="layui-btn layui-btn-xs layui-btn-danger weikai">三天未开门</button>
                    </div>
                </div>
                <div class="layui-card" style="margin-top: 20px">
                    <div class="layui-collapse">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">房屋基本信息</h2>
                            <div class="layui-colla-content layui-show">
                                <table class="layui-table" lay-skin="nob">
                                    <tr>
                                        <td>房屋编号</td>
                                        <td>#AB00001</td>
                                    </tr>
                                    <tr>
                                        <td>房主姓名</td>
                                        <td>张三</td>
                                    </tr>
                                    <tr>
                                        <td>房屋号</td>
                                        <td>201</td>
                                    </tr>
                                    <tr>
                                        <td>房产证号</td>
                                        <td>0000000002</td>
                                    </tr>
                                    <tr>
                                        <td>产权人姓名</td>
                                        <td>张三</td>
                                    </tr>
                                    <tr>
                                        <td>户型</td>
                                        <td>2</td>
                                    </tr>
                                    <tr>
                                        <td>用途</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>所属小区</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td>所属单元</td>
                                        <td>2</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">单元基本信息</h2>
                            <div class="layui-colla-content">
                                <table class="layui-table" lay-skin="nob">
                                    <tr>
                                        <td>楼栋名称</td>
                                        <td>49号楼</td>
                                    </tr>
                                    <tr>
                                        <td>楼层号</td>
                                        <td>2</td>
                                    </tr>
                                    <tr>
                                        <td>房屋号</td>
                                        <td>201</td>
                                    </tr>
                                    <tr>
                                        <td>房产证号</td>
                                        <td>49号楼</td>
                                    </tr>
                                    <tr>
                                        <td>产权人姓名</td>
                                        <td>张三</td>
                                    </tr>
                                    <tr>
                                        <td>户型</td>
                                        <td>2</td>
                                    </tr>
                                    <tr>
                                        <td>用途</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>所属小区</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td>所属单元</td>
                                        <td>2</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">楼栋基本信息</h2>
                            <div class="layui-colla-content">
                                <table class="layui-table" lay-skin="nob">
                                    <tr>
                                        <td>楼栋名称</td>
                                        <td>49号楼</td>
                                    </tr>
                                    <tr>
                                        <td>楼层号</td>
                                        <td>2</td>
                                    </tr>
                                    <tr>
                                        <td>房屋号</td>
                                        <td>201</td>
                                    </tr>
                                    <tr>
                                        <td>房产证号</td>
                                        <td>49号楼</td>
                                    </tr>
                                    <tr>
                                        <td>产权人姓名</td>
                                        <td>张三</td>
                                    </tr>
                                    <tr>
                                        <td>户型</td>
                                        <td>2</td>
                                    </tr>
                                    <tr>
                                        <td>用途</td>
                                        <td>1</td>
                                    </tr>
                                    <tr>
                                        <td>所属小区</td>
                                        <td>6</td>
                                    </tr>
                                    <tr>
                                        <td>所属单元</td>
                                        <td>2</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var map = new BMap.Map("con");// 创建地图实例
    var point = new BMap.Point(116.425100, 39.937254);// 创建点坐标
    map.centerAndZoom(point, 24);// 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    $.get('/index.php/home/map/loudongData',function (data) {
        var result = data.data;
        if(data.status==1){
            for(let i = 0;i<result.length;i++){
                (function (i) {
                    var sContent = '<iframe pic="'+ result[i]['pic'] +'" xiaoquid="'+ result[i]['xiaoquid'] +'" src="iframe.html" height="225px" width="340px" scrolling="no" frameborder="0"></iframe>'; //将所id传过去
                    var name = result[i]['name'];    //名称
                    var point = new BMap.Point(result[i]['longitude'], result[i]['latitude']);
                    var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
                    var label = new BMap.Label(name, {
                        offset: new BMap.Size(-(name.length) * 6 + 7.5, 27)
                    });

                    var marker = new BMap.Marker(point);
//                marker.setAnimation(BMAP_ANIMATION_BOUNCE);   //让标注的点跳动
//                鼠标点击获取经纬度
//                map.addEventListener("click",function(e){
//                    alert(e.point.lng + "," + e.point.lat);
//                });
                    map.addOverlay(marker);
                    marker.setLabel(label);
//                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    marker.addEventListener("click", function () {
                        this.openInfoWindow(infoWindow);
                        //点击的时候发送ajax
                        var id = result[i]['id'];  //获取楼栋id
                        var xiaoquid = result[i]['xiaoquid'];  //获取楼栋id
                        $.post('/index.php/home/map/danyuanfangData',{id:id,xiaoquid:xiaoquid},function (data) {
                            var result = data.data;
                            var content = '';
                            for (let i =0;i<result.length;i++){
                                if(result[i].is_use=="1"){
                                    content +='<li><i class="hao fl">'+ result[i].fangjianhao +'</i><span class="zhishi"  houseid="'+ result[i].fang_id +'"></span></li>'
                                }else {
                                    content +='<li><i class="hao fl">'+ result[i].fangjianhao +'</i><span class="zhishi danger" houseid="'+ result[i].fang_id +'">空</span></li>'
                                }
                            }
                            $('.danyuan:first').find('ul').html(content);

                        },"JSON");
                    });
                })(i)

            }
        }
    },'JSON')




    var layer = '';
    layui.use(['layer','element'], function () {
        var element = layui.element;
        layer = layui.layer;

    });


    //应用了事件委托将事件委托给了父元素
    $('.danyuan').on('click',function (e) {
        if(e.target.tagName=='SPAN'){  //必须是点击到span才会执行
            var fangid = $(e.target).attr('houseid');
            $.post('/index.php/home/map/getfangData',{fangid:fangid},function (data) {
                var result = data.data;
                if(result['menjin_status']=='0'){
                    $("#menjin").find('i').css('color','rgb(255, 188, 0)');
                    $("#menjin").find('i').attr('fangid',result['fang_id']);
                    $("#menjin").find('i').attr('fangjianhao',result['fangjianhao']);
                }
                if(result['menjin_status']=='1'){
                    $("#menjin").find('i').css('color','rgb(255,255,255)')
                    $("#menjin").find('i').attr('fangid',result['fang_id']);
                    $("#menjin").find('i').attr('fangjianhao',result['fangjianhao']);
                }
            },'JSON');
            //通过房id去获取开关门记录
            $.post('/index.php/home/map/getjiluData',{fangid:fangid},function (data) {
                var result = data.data;
                $('#jilu td').eq(1).html(result.time);
            },"JSON");

            $('.danyuan .zhishi').each(function (i, val) {
                if($(val).css('backgroundColor')=='rgb(0, 150, 136)'){
                    $(val).css('backgroundColor','rgb(215,215,215)');
                }
            });
            $(e.target).css('backgroundColor','rgb(0, 150, 136)');
        }
    })


    //门禁控制
    $("#menjin").click(function () {
        var that = $(this);
        var fangjianhao = $("#menjin").find('i').attr('fangjianhao');
        if(($(this).find('i').css('color')=='rgb(255, 255, 255)')){
            layer.confirm('你确定要为帅府小区5号楼一单元'+ fangjianhao +'关门吗?',function (index) {
                $.post('/index.php/home/map/menjinStatus',{menjin_status:0,fangid:$("#menjin").find('i').attr('fangid')},function (data) {
                    if(data['status']=='1'){
                        layer.msg('已关闭');
                        that.find('i').css('color','rgb(255, 188, 0)');
                        layer.close(index);
                    }
                },'JSON');
            });
        }else {
            layer.confirm('你确定要为帅府小区5号楼一单元'+ fangjianhao +'开门吗?',function (index) {
                $.post('/index.php/home/map/menjinStatus',{menjin_status:1,fangid:$("#menjin").find('i').attr('fangid')},function (data) {
                    if(data['status']=='1'){
                        layer.msg('已打开');
                        that.find('i').css('color','rgb(255, 255, 255)');
                        layer.close(index);
                    }
                },'JSON');
            });
        }
    });
</script>

</body>